{include file="public/head"/}
<script src="/static/Admin/webjs/vue.js"></script>
<style>
    table {
        text-align: center;
    }
    .ladder{
        text-align: left;
    }
    table th {
        text-align: center;
    }
</style>
<div class="container-fluid" id="getlist">
    <div class="row clearfix" id="search-box" style="margin-top:0">
        <div class="col-md-12 column text-right">
            <div class="form-inline" style="text-align: right;">
                <div class="form-group">
                    <input type="text" class="form-control" v-model="dname" @keyup.13="render" value=""
                           placeholder="{:lang('please_enter_the_job_name')}" v-focus>
                </div>
                <div class="form-group">
                    <button type="button" class="btn btn-default" @click="render">{:strtoupper(lang('search'))}</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info" id="headeralert">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>
    <div class="ntDesktop">
        <div class="ntDesktop-head">{:strtoupper(lang('job_setting'))}</div>
        <div class="row clearfix" style="padding-top:12px">
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li  v-if="isshow_search" class="active">
                        <a href="#home" data-toggle="tab"  @click="shdow"
                        >搜索结果<span class="glyphicon glyphicon-remove shdow" style="margin-left: 10px;" @click="shdow()"></span></a>
                    </li>
                    <li :class="{'active':country_id==0 && ! isshow_search}">
                        <a href="#home" data-toggle="tab" class="zhlang"
                           @click="countrychange('0')">{:strtoupper(lang('global'))}</a>
                    </li>
                    <li :class="{'active':country_id==1 && ! isshow_search}">
                        <a href="#home" data-toggle="tab" class="enlang"
                           @click="countrychange('1')">{:strtoupper(lang('BRAZIL'))}</a>
                    </li>
                    <li :class="{'active':country_id==2 && ! isshow_search}">
                        <a href="#home" data-toggle="tab" class="ptlang" 
                           @click="countrychange('2')">{:strtoupper(lang('CHINA'))}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li :class="{'active':index==0}" v-for="(langitem,index) in langs">
                        <a href="#home" data-toggle="tab" class="zhlang" data-lang="zh" @click="langchange(langitem.code)">{{langitem.name}}</a>
                    </li>
                </ul>
            </div>
            <div class="col-md-12  column text-right" style="margin-top: 5px;">
                <div class="form-inline">
                    {in name="66" value="$Think.session.admin.auth_ids"}
                    <a href="{:url('organization/positionadd')}" type="button"
                       class='btn btn-sm btn-primary option-recover' data-toggle="modal"
                       data-target="#myModal" onfocus="this.blur()">{:strtoupper(lang('add_job'))}</a>
                    {/in}
                </div>
            </div>
        </div>
        <div class="row clearfix" id="result_wrap">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <colgroup>
                        <col width="100">
                        <col>
                        <col>
                        <col>
                    </colgroup>
                    <thead style="text-align: center;">
                    <tr>
                        <th>{:strtoupper(lang('post_ID'))}</th>
                        <th style="text-align: left;">{:strtoupper(lang('post_name'))}</th>
                        <th>{:strtoupper(lang('number_of_employees'))}</th>
                        <th>固定</th>
                        <th>{:strtoupper(lang('operate'))}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id" v-if="item.isshow">
                        <td v-cloak>{{formatUnit(item.id,'ID')}}</td>
                        <td style="padding-left: 0" class="ladder">
                            <template v-for="(itemlevel,indexlevel) in item.level">&nbsp;&nbsp;&nbsp;&nbsp;</template>
                            <a v-cloak href="javascript:;" @click="menuchange(item.id,item.toggle,item.pid)">
                                <i v-if="item.isexist==1">
                                    <span href="javascropt:;" v-if="item.toggle"><span class="glyphicon glyphicon-minus"
                                                                                       style="margin-right:0"></span></span>
                                    <span href="javascropt:;" v-if="!item.toggle"><span class="glyphicon glyphicon-plus"
                                                                                        style="margin-right:0"></span></span>
                                </i>
                                {{item.content}}
                            </a>
                        </td>

                        <td v-cloak>{{item.num}}</td>
                        <td v-cloak>{{item.fix==1?'O':'-'}}</td>
                        <td style="text-align: right;">
                            <div>
                                {in name="69" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/Organization/positionedit?id='+item.id" type="button"
                                   class="btn btn-sm btn-primary option-recover" data-toggle="modal"
                                   data-target="#myModal" onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-pencil"></span> {:strtoupper(lang('edit'))}</a>
                                {/in}
                                {in name="67" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/Organization/positionadds?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal" data-target="#myModal" onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-plus"></span>{:strtoupper(lang('add_sub-post'))} </a>
                                {/in}
                                {in name="70" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/Organization/positionroot?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal" data-target="#position2menu_editModal"
                                   onfocus="this.blur()"><span
                                        class="fa fa-cogs"></span> {:strtoupper(lang('setting_permission'))} </a>
                                {/in}
                                {in name="68" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/Organization/positioncopy?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal" data-target="#myModal" onfocus="this.blur()"><span
                                        class="fa fa-copy"></span> {:strtoupper(lang('copy'))} </a>
                                {/in}
                                {in name="71" value="$Think.session.admin.auth_ids"}
                                <a href="javascript:;" @click="delrole(item.id)"
                                   class="btn btn-sm btn-default option-clear" onfocus="this.blur()"><span
                                        class="glyphicon glyphicon-trash"></span>{:strtoupper(lang('delete'))}</a>
                                {/in}
                            </div>
                        </td>
                    </tr>
                    <tr v-if="list.length==0">
                        <td colspan="4" class="no_date">{:strtoupper(lang('no_data'))}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<!--弹窗部分 开始-->
<div class="modal fade" id="myModal"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg"  role="document">
        <div class="modal-content"  style="width:1000px">
        </div>
    </div>
</div>

<!-- 设置权限弹窗 -->
<div class="modal fade" id="position2menu_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>
<script>
    Vue.directive('focus', {
        bind: function (el) {
            el.focus()
        },
        inserted: function (el) {
            el.focus();//自动获取焦点
        },
    })
    var table = new Vue({
        el: '#getlist',
        data: {
            langs:[],
            list: [],
            dname: '',
            lang: 'zh',
            country_id: '0',
            isshow_search:false
        },
        methods: {
            formatUnit:formatUnit,
            getAllList(){
                $('.loding').show();
                if(this.dname==''){
                  this.isshow_search=false  
                }
                $.ajax({
                    url: "/admin/organization/position",
                    type: 'post',
                    data: {
                        dname: this.dname,
                        lang: this.lang,
                        country_id: this.country_id
                    },
                    dataType: "json",
                    success: (result) => {
                        if(result){
                            this.list = result.getposition;
                            this.list.map((item) => {
                                item.isshow = true
                                if(item.isexist==1){
                                    item.toggle=true
                                }
                            })
                        }
                        $('.loding').hide();
                    }
                })
            },
            //折线的是否显示
            menuchange(id,toggle,pid){
                this.list = this.list.map((item) => {
                    if (item.pid == id) { //一级一级展开
                        item.isshow = !toggle
                        if(toggle)
                            this.menuchange(item.id,toggle,item.pid)
                    }
                    if (item.id == id) {
                        item.toggle = !toggle
                    }
                    return item
                })
            },
            //国家点击
            countrychange(country_id){
                this.isshow_search=false;
                this.dname='';
                this.country_id = country_id;
                this.getAllList();
            },
            //搜索条件满足才进行搜索
            render(){
                if(this.dname){
                    this.country_id='11';
                    this.isshow_search=true
                }else {
                    this.country_id=0;
                    this.isshow_search=false
                }
                this.getAllList()
            },
            //关闭搜索内容
            shdow(){
                this.dname='';
                this.country_id=0;
                this.isshow_search=false
                this.getAllList()
            },
            //语言点击
            langchange(lang){
                this.lang = lang;
                this.getAllList()
            },
            //删除职位
            delrole(id){
                $.ajax({
                    url: '/admin/Organization/positiondelete?id=' + id,
                    type: "post",
                    success: result => {
                        var res = JSON.parse(result);
                        console.log(res);
                        change_mes_type('#headeralert',res.status)
                        $('#headeralert').show()
                        $('#headeralert p').html('*' + res.msg + '<br>')
                        if(res.status==1){
                            this.list.some((item, i) => {
                                if (item.id == id) {
                                    this.list.splice(i, 1);//删除其中的索引的数据
                                    return true;
                                }
                            })
                        }
                    }
                })
            },
        },
        created(){
            $.ajax({
                url:'/admin/api/getLangType',
                type:'post',
                success:data=>{
                    lansdata=JSON.parse(data);
                    this.langs = lansdata;
                    this.lang=lansdata[0].code;
                    this.getAllList()
                }
            })
            $('#myModal').on('hide.bs.modal', () => {
                if(localStorage.getItem("model")){
                    this.getAllList();
                    localStorage.removeItem("model");
                }
            })
        }

    })
    $("#myModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
        $(document).unbind('keydown')
    });
    $("#position2menu_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(document).unbind('keydown')
    });
</script>
{include file="public/foot"/}